import React, { useEffect } from 'react';
import { renderStream, stopScreenShare } from '@/utils/lib';

const StreamContainer = (props: any) => {
	const { screenStream, screenShareRenderError } = props;
	const render = async (label: string, videoId: string) => {
		try {
			const resp = await renderStream(label, videoId, (data: any) => {
				screenShareRenderError && screenShareRenderError(data);
			});
			console.log('render screen stream success:', resp);
		} catch (error) {
			console.log('render screen stream error:', error);
		}
	};

	useEffect(() => {
		screenStream.map((item: any) => {
			if (item.label.indexOf('screen') > -1) {
				render(item.label, item.id + '-mark');
			}
		});
	}, [screenStream]);

	return (
		<div className="stream-container-box">
			{screenStream.map((item: any) => {
				return <video id={item.id + '-mark'} autoPlay controls={false} key={item.id}></video>;
			})}
		</div>
	);
};

export default StreamContainer;
